<template>
	<view class="msgpage">
		<u-sticky bgColor="#fff">
			<u-tabs :list="navList" @click="tables" lineWidth="100rpx" lineHeight="4rpx" :scrollable="false" :current="currents"></u-tabs>
		</u-sticky>
		
		<view class="msgList">
			<view v-for="(item,index) in tableData" :key="index" class="item" @click="pagelink(item)">
				<view class="icon" :style="{background:item.msgType==2?'#F9A944':'#3489F2'}">
					<u-icon :name="item.msgType==2?'calendar':'email'" color="#fff" size="28"></u-icon>
				</view>
				<view style="padding-left: 30rpx;flex: 1;">
					<view class="title">
						<view><text>{{item.msgType==2?'待办消息':'系统消息'}}</text><text class="bar" v-if="!item.isRead"></text></view>
						<view style="color: #aaa;font-size: 28rpx;">{{(item.createTime||'').split(' ')[0]}}</view>
					</view>
					<view class="sp">{{item.content||'--'}}</view>
				</view>
			</view>
		</view>
		
		<view style="padding-top: 50rpx;" v-if="tableData.length==0">
			<u-empty text="暂无消息" :icon="emptyIcon"></u-empty>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad,onReachBottom } from "@dcloudio/uni-app";
import emptyIcon from "@/pagesC/static/images/ndata.png"
import { msgList, msgread } from '@/api/qss/zxhapi.js'

const navList = ref([
	{ name: '全部消息'},	{ name: '待办消息'},	{ name: '系统消息'}
])
const tableData = ref([])
const sollfunct = ref(0)
const currents = ref(1)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  msgType: 2,
  isRead: false
})

//table切换
function tables(e){
	tableData.value = []
	queryParams.value.pageNum=1
	if(e.index==0){
		queryParams.value.msgType = ''
		queryParams.value.isRead = ''
	} else if(e.index==1){
		queryParams.value.msgType = 2
		queryParams.value.isRead = false
	} else if(e.index==2){
		queryParams.value.msgType = 1
		queryParams.value.isRead = ''
	}
	getList()
}

//点击消息
function pagelink(item){
	msgread([item.id]).then((res) => {
		item.isRead = true
		if(item.dsTable == 'enterprise_rectify_notice'){
			//跳整改通知
			uni.navigateTo({
				url: '/pagesC/project/arrangeEdit?id='+item.dsId
			})
		} else{
			// uni.showToast({ title: "消息已读", icon: "none"})
		}
	})
}

//获取列表
function getList(){
	msgList(queryParams.value).then(res=>{
		console.log(res, '列表')
		if (res.data) {
		  	let list = res.data.rows || []
		  	let total = res.data.total || 0
		  	tableData.value.push(...list)
		  	queryParams.value.pageSize*queryParams.value.page < total ? sollfunct.value = 1 : sollfunct.value = 0
		} else {
		  	sollfunct.value = 0
		}
	}).finally(()=>{
		uni.hideLoading()
	})
};

//滚动翻页
onReachBottom(()=>{
	if (sollfunct.value == 1) {
		queryParams.value.pageNum++
		getList()
	}
})

onLoad((option)=>{
	getList()
})

</script>

<style lang="less" scoped>
.msgpage{
	min-height: 100%;
	background: #f8f8f8;
	.msgList{
		border-top: 20rpx solid #f8f8f8;
		background: #fff;
		padding: 0 30rpx;
		.icon{
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.item{
			padding: 40rpx 0;
			border-bottom: 1px solid #eee;
			display: flex;
			.title{
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.bar{
					width: 10rpx;height: 10rpx;border-radius: 50%;display: inline-block;background: red;position: relative;top: -16rpx;left: 10rpx;
				}
			}
			.sp{
				line-height: 1.8;font-size: 28rpx;color: #aaa;margin-top: 10rpx;
			}
		}
	}
}
</style>